<script lang="ts" setup name="FoldingActivityEdit">
import { CirclePlus, Delete, DeleteFilled, Plus } from '@element-plus/icons-vue'
import { FormInstance, FormRules } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { ColumnProps } from '~/library/components/ProTable/interface'
import { getGoodsList, getWaresCategoryListAPI } from '~/src/api/goods'
import { Inventory } from '~/src/api/interface/goods'
import { Member } from '~/src/api/interface/member'
import { Promotion } from '~/src/api/interface/retail'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import { getMemberGradeAPI } from '~/src/api/member'
import { createDiscountLimitAPI, editDiscountLimitAPI, getDiscountLimitDetailAPI } from '~/src/api/retail'
import { getStoreAPI } from '~/src/api/storeManagement'
import { dateList, onlyVipList, storeList, weekList } from '~/src/utils/serviceDict'
import { categoryColumn, storeColumn } from './info/columns'
import SelectTable from '/@vab/components/SelectTable/index.vue'
import SelectTreeTable from '/@vab/components/SelectTreeData/index.vue'

onMounted(async () => {
  await Promise.all([getMemberGrade()])
  documentStatus.value = (route.query.type as string) || 'add'
  if (route.query.id) {
    getDiscountLimit()
  } else {
    addLineResp()
  }
})
const getDiscountLimit = async () => {
  const { data } = await getDiscountLimitDetailAPI({ id: route.query.id })
  formData.value = data
  date.value[0] = data.activityBeginDate || ''
  date.value[1] = data.activityEndDate || ''
  if (data.activityEndTime) {
    activityDate.value[0] = data.activityBeginTime || ''
    activityDate.value[1] = data.activityEndTime || ''
    isActivityDate.value = true
  }
  if (data.excludeBranchList?.length > 0) isStore.value = true
}

const route = useRoute()
const router = useRouter()
const formRef = ref<FormInstance>()
const formData = ref<Partial<Promotion.DiscountLimitDetail>>({
  activityTypeId: 3,
  activitySubTypeId: 4,
  channelId: 1,
  branchType: 0,
  branchList: [],
  weekdayType: 0,
  activityBeginTime: '',
  activityBeginDate: '',
  onlyVip: 0,
  limitBuyType: 0,
  integral: 0,
  goodsType: 0,
  noGoodsType: 0,
  goodsList: [],
  lineRespList: [],
})

const date = ref<string[]>(['', ''])
const activityDate = ref<string[]>(['', ''])
const isActivityDate = ref(false)
const isStore = ref(false)
const documentStatus = ref('add')

const rules = reactive<FormRules>({
  activityInfoName: [{ required: true, message: '' }],
  onlyVip: [{ required: true, message: '' }],
  activityBeginDate: [
    { required: true, message: '' },
    {
      validator: (rule, value, callback) => {
        console.log(value)
        if (!value) return callback(new Error('请选择日期'))
        callback()
      },
    },
  ],
  discountRate: [
    { required: true, message: '' },
    {
      validator: (Rule: any, value: any, callback: any) => {
        if (!formData.value.discountRate) return callback(new Error('请输入'))
        callback()
      },
    },
  ],
  goodsList: [
    {
      validator: (Rule: any, value: any, callback: any) => {
        if (formData.value.goodsType === 2) {
          if (formData.value.goodsList!.length < 1) return callback(new Error('请选择商品'))
        }
        callback()
      },
    },
  ],
  sortList: [
    {
      validator: (Rule: any, value: any, callback: any) => {
        if (formData.value.goodsType === 1) {
          if (formData.value.sortList!.length < 1) return callback(new Error('请选择商品分类'))
        }
        callback()
      },
    },
  ],
  lineRespList: [
    { required: true, message: '至少需要添加一条优惠层级', trigger: 'blur' },
    {
      validator: (Rule: any, value: any, callback: any) => {
        const list = formData.value.lineRespList || []
        // 1️⃣ 必填验证（数组不得为空）
        if (!list.length) {
          return callback(new Error('至少需要添加一条优惠层级'))
        }
        // 2️⃣ 每一条数据 condition1 > condition2
        for (let i = 0; i < list.length; i++) {
          const item = list[i]
          if (item.condition2 < 0.1 || item.condition2 > 9.9) {
            console.log(item, 'item')
            console.log(formData.value.lineRespList)

            item.condition2 = 0
            return callback(new Error(`第 ${i + 1} 层：折扣必须在0.1到9.9之间`))
          }
        }

        // 3️⃣ condition1 必须递增：第二行 > 第一行，以此类推
        for (let i = 1; i < list.length; i++) {
          if (list[i].condition1 <= list[i - 1].condition1) {
            return callback(new Error(`第 ${i + 1} 层：满折件数必须大于上一层`))
          }
        }
        // 最终成功
        callback()
      },
    },
  ],
})

// 会员等级列表
const memberList = ref<Member.MemberGrade[]>([])
const getMemberGrade = async () => {
  const res = await getMemberGradeAPI({ pageNum: 1, pageSize: 9999 })
  memberList.value = res.data.list || []
}

// 添加优惠层级
const addLineResp = (index?: number) => {
  if (!formData.value.lineRespList || formData.value.lineRespList?.length > 4) return
  if (index) {
    formData.value.lineRespList?.splice(index, 0, {
      sn: formData.value.lineRespList?.length + 1 || 1,
      condition1: 0,
      condition2: 0,
    })
    formData.value.lineRespList?.forEach((item, index) => {
      item.sn = index + 1
    })
  } else {
    formData.value.lineRespList?.push({
      sn: formData.value.lineRespList?.length + 1 || 1,
      condition1: 0,
      condition2: 0,
    })
  }
}

watch(
  () => date.value,
  (val) => {
    formData.value.activityBeginDate = val?.[0] || ''
    formData.value.activityEndDate = val?.[1] || ''
  },
  { deep: true }
)
watch(
  () => activityDate.value,
  (newVal) => {
    formData.value.activityBeginTime = newVal?.[0] || ''
    formData.value.activityEndTime = newVal?.[1] || ''
  },
  { deep: true }
)
watch(
  () => formData.value.branchType,
  (newVal) => {
    if (newVal === 2) {
      formData.value.branchList = []
    } else if (newVal === 1) {
      formData.value.excludeBranchList = []
    } else {
      formData.value.excludeBranchList = []
      formData.value.branchList = []
    }
  }
)

const selectTreeTableRef = ref<InstanceType<typeof SelectTreeTable> | null>(null)
const openSelectTreeTable = (title: string, searchVal?: string | number) => {
  const params = {
    title,
    isView: false,
    searchVal,
    index: 0,
    mate: 'prodcutId',
    selTags: formData.value?.[title === '指定商品' ? 'goodsList' : 'excludeGoodsList']?.map((i: any) => {
      i.name = i.spuName
      i.id = i.pdtSpuSpecId
      return i
    }),
    columns: [
      { type: 'selection', width: 80 },
      { prop: 'barcode', label: '编码', align: 'left', width: 200 },
      { prop: 'name', label: '商品名称', align: 'left', minWidth: 220 },
      { prop: 'productName', label: '规格', align: 'left', minWidth: 100 },
      { prop: 'unitName', label: '单位', align: 'left', minWidth: 160 },
      // { prop: "posPrice", label: "商品价格", minWidth: 120 }
      { prop: 'posPrice', label: '零售价格', minWidth: 120 },
    ],
    idName: 'goodsCategoryId',
    treeApi: getWaresCategoryListAPI,
    api: getGoodsList,
  }
  selectTreeTableRef.value?.acceptParams(params)
}
const handleSelectedTreeList = (val: { list: any[]; title: string }) => {
  if (val.list.length > 0) {
    let list: Promotion.GoodsItem[] = val.list.map((im) => {
      return {
        spuName: im.name,
        spuId: im.id,
        pdtSpuSpecId: im.prodcutId,
        spuBarcode: im.barcode,
        price: 0,
        poPrice: im.purPrice,
        saPrice: im.posPrice,
      }
    })
    if (val.title === '指定商品') {
      formData.value.excludeGoodsList = []
      formData.value.goodsList = cloneDeep(list)
    } else {
      formData.value.goodsList = []
      formData.value.excludeGoodsList = cloneDeep(list)
    }
  }
}
// 选择门店
const selectTableRef = ref<InstanceType<typeof SelectTable>>()
const openSelectTableDialog = (
  title: string,
  key: 'excludeBranchList' | 'branchList' | 'excludeGoodsSortList' | 'sortList',
  id: string,
  columns: ColumnProps<any>[],
  api: (params: {}) => Promise<any>
) => {
  selectTableRef.value!.acceptParams({
    title,
    isView: false,
    selTags:
      formData.value?.[key]?.map((i: any) => {
        i.name = i.name
        i.id = i.id
        return i
      }) || [],
    mate: id,
    selType: 'selection',
    apiParams: {},
    width: 800,
    columns,
    api,
  })
}
const handleSelectedTable = (storeInfo: any) => {
  if (storeInfo.title === '选择指定门店') {
    formData.value.excludeBranchList = []
    formData.value.branchList =
      storeInfo.list?.map((item: StoreManagement.Store) => ({
        storeId: item.id,
        branchName: item.storeName,
      })) || []
  } else if (storeInfo.title === '选择排除门店') {
    formData.value.branchList = []
    formData.value.excludeBranchList =
      storeInfo.list?.map((item: StoreManagement.Store) => ({
        storeId: item.id,
        branchName: item.storeName,
      })) || []
  } else if (storeInfo.title === '参与商品指定分类') {
    formData.value.excludeGoodsSortList = []
    formData.value.sortList =
      storeInfo.list?.map((item: Inventory.CategoryList) => ({
        id: item.id,
        name: item.name,
        itemSortId: item.id,
        itemSortName: item.name,
        sort: item.sort,
      })) || []
  } else if (storeInfo.title === '不参与商品分类') {
    formData.value.sortList = []
    formData.value.excludeGoodsSortList =
      storeInfo.list?.map((item: Inventory.CategoryList) => ({
        id: item.id,
        name: item.name,
        itemSortId: item.id,
        itemSortName: item.name,
        sort: item.sort,
      })) || []
  }
}

const { useChangeDetailData } = useHandleDetail()
const onSubmitGoods = async () => {
  await formRef.value?.validate()
  if (!formData.value.activityBeginDate || !formData.value.activityEndDate) return ElMessage.error('请选择活动日期')
  // if (!formData.value.goodsType && !formData.value.discountRate) return ElMessage.error('请输入统一折扣')
  useChangeDetailData(route.query.id ? editDiscountLimitAPI : createDiscountLimitAPI, formData.value, '/retail/promotion/foldingActivity')
}
</script>

<template>
  <div class="auto-height-container flx-column">
    <header-line
      :confirmIsSHow="documentStatus !== 'audited'"
      :title="(route.query.id && +route.query.id ? (documentStatus === 'audited' ? '查看' : '编辑') : '新增') + '满折活动'"
      @on-submit="onSubmitGoods()"
    >
      <!-- <template #button>
        <el-button v-if="documentStatus !== 'audited'" type="primary" @click="onSubmitGoods">保存并审核</el-button>
      </template> -->
    </header-line>

    <el-form
      ref="formRef"
      class="flex1"
      :disabled="documentStatus === 'audited'"
      label-suffix="："
      label-width="150"
      :model="formData"
      :rules="rules"
    >
      <el-row :gutter="24" style="width: 80%">
        <el-col :span="14">
          <paragraph name="基本信息" />
          <el-form-item label="活动名称" prop="activityInfoName">
            <el-input v-model="formData.activityInfoName" placeholder="" />
          </el-form-item>

          <el-form-item label="活动时间" prop="activityBeginDate">
            <el-date-picker
              v-model="date"
              class="width300"
              :clearable="false"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              start-placeholder="开始日期"
              type="daterange"
              value-format="YYYY-MM-DD"
            />
            <el-checkbox
              v-model="isActivityDate"
              class="ml20"
              label="按周期"
              @change="
                (e) => {
                  if (!e) {
                    formData.weekdaysObject = []
                    formData.activityBeginTime = ''
                    formData.activityEndTime = ''
                    activityDate = []
                    formData.weekdayType = 0
                  } else {
                    formData.activityBeginTime = '00:00:00'
                    formData.activityEndTime = '23:59:59'
                    activityDate = ['00:00:00', '23:59:59']
                    formData.weekdayType = 1
                  }
                }
              "
            />
          </el-form-item>
        </el-col>
        <el-col v-if="isActivityDate" class="ml160 pt10 pb10 pl10" :span="15" style="background-color: #f5f8fa">
          <el-form-item
            label="执行时间段"
            label-width="110"
            prop="activityBeginTime"
            :rules="[{ required: isActivityDate, message: '' }]"
            style="width: 60%"
          >
            <el-time-picker
              v-model="activityDate"
              arrow-control
              end-placeholder="结束时间"
              format="HH:mm:ss"
              is-range
              range-separator="-"
              size="small"
              start-placeholder="开始时间"
              value-format="HH:mm:ss"
            />
          </el-form-item>
          <el-form-item class="mt20" label="执行周期" label-width="110">
            <!-- <div class="flx-column-between"> -->
            <el-radio-group v-model="formData.weekdayType" @change="formData.weekdaysObject = []">
              <el-radio-button v-for="item in dateList" :key="item.value" class="ml10" :label="item.label" :value="item.value" />
            </el-radio-group>
            <!-- </div> -->
          </el-form-item>
          <el-form-item
            v-if="formData.weekdayType !== 1"
            label-width="100"
            prop="weekdaysObject"
            :rules="[{ required: formData.weekdayType !== 1, message: '请选择' }]"
          >
            <el-checkbox-group v-if="formData.weekdayType === 2" v-model="formData.weekdaysObject" class="ml10">
              <el-checkbox v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value" />
            </el-checkbox-group>
            <el-select
              v-if="formData.weekdayType === 3"
              v-model="formData.weekdaysObject"
              class="mt10 ml10 width250"
              multiple
              placeholder="请选择日期"
            >
              <el-option v-for="item in 31" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col class="mt20" :span="14">
          <el-form-item label="使用渠道" prop="channelId">
            <el-select v-model="formData.channelId" disabled placeholder="">
              <el-option
                v-for="item in [
                  { label: '全部', value: 0 },
                  { label: '线下', value: 1 },
                  { label: '小程序', value: 2 },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="门店范围" prop="branchType">
            <el-radio-group v-model="formData.branchType" @change="(e) => (!e ? (isStore = false) : '')">
              <el-radio v-for="item in storeList" :key="item.value" class="ml10" :label="item.label" :value="item.value" />
            </el-radio-group>
            <el-checkbox
              v-if="formData.branchType != 1"
              v-model="isStore"
              class="ml20"
              label="排除门店"
              @change="
                () => {
                  if (isStore) {
                    formData.branchType = 2
                  }
                }
              "
            />
          </el-form-item>
          <el-form-item
            v-if="formData.branchType || isStore"
            class="mb20"
            label=""
            :prop="formData.branchType === 2 ? 'excludeBranchList' : 'branchList'"
            :rules="[{ required: !!formData.branchType, message: '请选择' }]"
          >
            <el-col :span="24">
              <el-table
                border
                :data="formData.branchType === 2 ? formData.excludeBranchList : formData.branchList"
                style="width: 100%; max-height: 200px"
              >
                <el-table-column label="序号" width="60">
                  <template #default="{ $index }">{{ $index + 1 }}</template>
                </el-table-column>
                <el-table-column label="门店名称" prop="branchName" width="width" />
                <el-table-column label="门店编码" prop="storeId" width="width" />
                <!-- <el-table-column label="门店类型" prop="prop" width="width" /> -->
                <el-table-column align="center" fixed="right" label="操作" width="80">
                  <template #default="{ $index }">
                    <el-button
                      :icon="DeleteFilled"
                      link
                      type="primary"
                      @click="
                        () =>
                          formData.branchType === 2 ? formData.excludeBranchList?.splice($index, 1) : formData.branchList?.splice($index, 1)
                      "
                    />
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                size="small"
                type="primary"
                @click="
                  openSelectTableDialog(
                    formData.branchType === 2 ? '选择排除门店' : '选择指定门店',
                    formData.branchType === 2 ? 'excludeBranchList' : 'branchList',
                    'id',
                    storeColumn,
                    getStoreAPI
                  )
                "
              >
                批量添加
              </el-button>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label=" 参与商品" prop="goodsType">
            <el-radio-group
              v-model="formData.goodsType"
              @change="
                (e) => {
                  formData.sortList = []
                  formData.goodsList = []
                  formData.discountRate = 0
                  if (e === 2) {
                    formData.excludeGoodsSortList = []
                    formData.excludeGoodsList = []
                    formData.noGoodsType === 0
                  }
                }
              "
            >
              <el-radio label="全部" :value="0" />
              <el-radio v-if="formData.noGoodsType != 1" label="指定分类" :value="1" />
              <el-radio v-if="formData.noGoodsType != 2" label="指定商品" :value="2" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="17">
          <el-form-item v-if="formData.goodsType === 1 && formData.noGoodsType != 1" prop="sortList">
            <el-table border :data="formData.sortList" style="width: 100%; max-height: 200px">
              <el-table-column label="序号" prop="prop" width="60">
                <template #default="{ $index }">{{ $index + 1 }}</template>
              </el-table-column>
              <el-table-column label="分类编码" prop="itemSortId" />
              <el-table-column label="分类名称" prop="itemSortName" />
              <el-table-column fixed="right" label="操作" prop="prop" width="80">
                <template #default="{ $index }">
                  <el-button :icon="DeleteFilled" link type="primary" @click="() => formData.sortList?.splice($index, 1)" />
                </template>
              </el-table-column>
            </el-table>
            <el-button
              class="ml10"
              :icon="Plus"
              size="small"
              type="primary"
              @click="openSelectTableDialog('参与商品指定分类', 'sortList', 'id', categoryColumn, getWaresCategoryListAPI)"
            />
          </el-form-item>
          <el-form-item v-if="formData.goodsType == 2" label="" prop="goodsList">
            <el-table border :data="formData.goodsList">
              <el-table-column label="序号" prop="prop" width="60">
                <template #default="{ $index }">{{ $index + 1 }}</template>
              </el-table-column>
              <el-table-column label="商品条码" prop="spuBarcode" />
              <el-table-column label="商品名称" prop="spuName" />
              <el-table-column label="零售价" prop="saPrice" width="100" />
              <el-table-column fixed="right" label="操作" prop="prop" width="80">
                <template #default="{ $index }">
                  <el-button :icon="DeleteFilled" link type="primary" @click="() => formData.goodsList?.splice($index, 1)" />
                </template>
              </el-table-column>
            </el-table>
            <el-button class="ml10" :icon="Plus" size="small" type="primary" @click="openSelectTreeTable('指定商品')" />
          </el-form-item>
        </el-col>

        <el-col :span="14">
          <el-form-item v-if="formData.goodsType !== 2" label=" 不参与商品" prop="noGoodsType">
            <el-radio-group
              v-model="formData.noGoodsType"
              @change="
                () => {
                  formData.excludeGoodsSortList = []
                  formData.excludeGoodsList = []
                }
              "
            >
              <el-radio label="无" :value="0" />
              <el-radio v-if="formData.goodsType != 1" label="指定分类" :value="1" />
              <el-radio label="指定商品" :value="2" />
            </el-radio-group>
          </el-form-item>
          <!--
          <el-form-item v-if="formData.noGoodsType === 1" label="指定分类">
            <el-select v-model="formData.excludeGoodsSortList" placeholder="">
              <el-option v-for="item in goodsCategoryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item> -->
        </el-col>
        <el-col :span="17">
          <el-form-item v-if="formData.noGoodsType === 1 && formData.goodsType != 1 && formData.goodsType !== 2">
            <el-table border :data="formData.excludeGoodsSortList">
              <el-table-column label="序号" prop="prop" width="60">
                <template #default="{ $index }">{{ $index + 1 }}</template>
              </el-table-column>
              <el-table-column label="分类编码" prop="itemSortId" />
              <el-table-column label="分类名称" prop="itemSortName" />
              <!-- <el-table-column label="分类折扣" prop="discount" width="100" /> -->
              <!-- <el-table-column label="商品数量" prop="sort" width="100" /> -->
              <el-table-column fixed="right" label="操作" width="80">
                <template #default="{ $index }">
                  <el-button :icon="DeleteFilled" link type="primary" @click="() => formData.excludeGoodsSortList?.splice($index, 1)" />
                </template>
              </el-table-column>
            </el-table>
            <el-button
              class="ml10"
              :icon="Plus"
              size="small"
              type="primary"
              @click="openSelectTableDialog('不参与商品分类', 'excludeGoodsSortList', 'id', categoryColumn, getWaresCategoryListAPI)"
            />
          </el-form-item>
          <el-form-item v-if="formData.noGoodsType === 2 && formData.goodsType !== 2">
            <el-table border :data="formData.excludeGoodsList">
              <el-table-column label="序号" prop="index" width="60">
                <template #default="{ $index }">{{ $index + 1 }}</template>
              </el-table-column>
              <el-table-column label="商品条码" prop="spuBarcode" width="200" />
              <el-table-column label="商品名称" prop="spuName" width="200" />
              <el-table-column label="零售价" prop="saPrice" />
              <el-table-column fixed="right" label="操作" prop="operation" width="80">
                <template #default="{ $index }">
                  <el-button :icon="DeleteFilled" link type="primary" @click="() => formData.excludeGoodsList?.splice($index, 1)" />
                </template>
              </el-table-column>
            </el-table>
            <el-button class="ml10" :icon="Plus" size="small" type="primary" @click="openSelectTreeTable('不参与商品')" />
          </el-form-item>
        </el-col>

        <el-col :span="14">
          <el-form-item label="适用人群" prop="onlyVip">
            <el-select v-model="formData.onlyVip" placeholder="">
              <el-option v-for="item in onlyVipList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.onlyVip" label="会员等级" prop="vipTypeIdsObject">
            <el-select v-model="formData.vipTypeIdsObject" multiple placeholder="">
              <el-option v-for="item in memberList" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="会员积分" prop="integral">
            <el-radio-group v-model="formData.integral">
              <el-radio label="是" :value="1" />
              <el-radio label="否" :value="0" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动说明" prop="remark">
            <el-input v-model="formData.remark" placeholder="" type="textarea" />
          </el-form-item>
          <paragraph name="活动详情" />
          <el-form-item label="优惠层级" prop="lineRespList">
            <el-row v-for="(item, i) in formData.lineRespList" :key="item.sn" class="mt5" :gutter="24" type="flex">
              <el-col :span="1">满</el-col>
              <el-col :span="10">
                <input-number-float v-model:modelValue="item.condition1" v-select-all>
                  <template #suffix><div class="mr10">件</div></template>
                </input-number-float>
              </el-col>
              <el-col :span="1">打</el-col>
              <el-col :span="10">
                <input-number-float v-model:modelValue="item.condition2" v-select-all placeholder="范围（0.1-9.9）">
                  <template #suffix><div class="mr10">折</div></template>
                </input-number-float>
              </el-col>
              <el-col :span="1">
                <el-icon @click="addLineResp(i + 1)"><circle-plus /></el-icon>
              </el-col>
              <el-col v-if="formData.lineRespList!.length > 1" :span="1" @click="() => formData.lineRespList?.splice(i, 1)">
                <el-icon><delete /></el-icon>
              </el-col>
            </el-row>
            <div class="text-invalid-color fsize12">* 支持多层级优惠，每层优惠不可叠加使用，最多5层</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <select-tree-table ref="selectTreeTableRef" @selected-list="handleSelectedTreeList" />
    <select-table ref="selectTableRef" @selected-list="handleSelectedTable" />
  </div>
</template>

<style lang="scss" scoped></style>
